<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/novel.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
</head>
<body>
<input type="hidden" id="charterPrevUrl">
<input type="hidden" id="charterNextUrl">
<input type="hidden" id="novelId">
<input type="hidden" id="chapterId">
<div class="content whisper-content leacots-content details-content">
    <div class="cont w1000">
        <div class="article-cont">
            <div class="title">
            </div>
            <div class="context">
            </div>
            <h4>
            </h4>
            <div class="btn-box">
                <button class="layui-btn layui-btn-primary" onclick="prevUrl()">
                    <div class="charterPrevName"></div>
                </button>
                <button class="layui-btn layui-btn-primary" onclick="nextUrl()">
                    <div class="charterNextName"></div>
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    var oldUrl = window.location.href;
    var newUrl = oldUrl.replace("context", "contextDetail");
    $(function () {
        $.get(newUrl, function (result) {
            $(".title").html(result.charterName);
            $(".context").html(result.charterContext);
            $(".charterPrevName").html(result.charterPrevName);
            $(".charterNextName").html(result.charterNextName);
            $("#chapterId").val(result.id);
        });
    })

    function prevUrl() {
        var id = $("#chapterId").val();
        window.location.href = "/context/" + id + "/0";
    }

    function nextUrl() {
        var id = $("#chapterId").val();
        window.location.href = "/context/" + id + "/1";
    }
</script>
</body>
</html>